﻿<!--菜品展示界面-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<!-- 包含公共的JSP代码片段 -->

<title>锐颜酒家后台管理平台</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/detail/style/js/jquery.js"></script>
<script type="text/javascript" src="/detail/style/js/page_common.js"></script>
<link href="/detail/style/css/common_style_blue.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/detail/style/css/index_1.css" />
	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link href="/detail/style/css/index.css" rel="stylesheet" type="text/css" />

	<!--内嵌式的CSS-->
	<style type="text/css">
		/*类选择器*/
		.a{
			font-weight: bold;
			background-color: pink;
		}

		/*类选择器*/
		.b{
			color: white;
			background-color: orange;
		}
	</style>

	<!--内嵌式的JS-->
	<script type="text/javascript">
		/**
		 * 去新的一页
		 * @param desk_id 餐桌的主键
		 * @param type_id 菜品类型的主键
		 * @param currentPage 当前页码
		 */
		function goNewPage(desk_id, type_id, currentPage)
		{
			location.href = '/menu_UI/' + desk_id + '/' + type_id + '/' + currentPage;
		}

		/**
		 * 跳转到菜品的详情
		 * @param foodID 菜品的主键
		 * @param deskID 餐桌的主键
		 * @param typeID 菜系的主键
		 */
		function menuToInfo(foodID, deskID, typeID)
		{
			location.href = '/menuToInfo/' + foodID + '/' + deskID + '/' + typeID;
		}

		/**
		 * 跳转到查看购物车页面
		 * @param deskID
		 */
		function checkCart(deskID, typeID)
		{
			location.href = '/checkCart/' + deskID + '/' + typeID;
		}
	</script>

</head>
<body style="text-align: center">
	<div id="all">
		<div id="menu">
			<!-- 显示菜品的div -->
			<div id="top">
				<ul th:each="food: ${pageUtils.records}">
					<!-- 循环列出餐品 -->
					<li>
						<dl>
							<dt>
								<a href="javascript:void(0);" th:onclick="|menuToInfo(${food.id}, ${desk.id}, ${type_id})|">
									<img width="214px" height="145px" th:src="|/upload/${food.photo}|"/>
								</a>
							</dt>
							<dd class="f1">
								<a href="javascript:void(0);" th:text="${food.title}"></a>
							</dd>
							<dd class="f2">
								<a href="javascript:void(0);" style="font-family: Arial">&yen;<span th:text="${food.price}"></span></a>
							</dd>
						</dl>
					</li>
				</ul>
			</div>

			<!-- 底部分页导航条div -->
			<div id="foot">
				<!--左箭头-->
				<span style="float:left; line-height:53PX; margin-left:-50px; font-weight:bold; ">
					<span style="font-weight:bold">&lt;&lt;</span>
				</span>

				<!--中间的页码-->
				<div id="btn">
					<ul>
						<li th:each="num: ${pageUtils.numbers}">
							<a th:class="${pageUtils.currentPage == num}? a" th:text="${num}" href="javascript:void(0);" th:onclick="|goNewPage(${desk.id}, ${type_id}, ${num})|"></a>
						</li>
					</ul>
				</div>

				<!--右箭头-->
				<span style="float:right; line-height:53px; margin-right:10px;">
					<span style="font-weight:bold">&gt;&gt;</span>
				</span>
			</div>

		</div>

		<!-- 右边菜系列表，菜品搜索框  -->
		<div id="dish_class">

			<div id="dish_top">
				<ul>
				<li class="dish_num"></li>
					<li>
						<a href="javascript:void(0);" th:onclick="|checkCart(${desk.id}, ${type_id})|">
							<img src="/detail/style/images/call2.gif" />
						</a>
					</li>
				</ul>
			</div>

			<div id="dish_2">
				<ul th:each="foodType: ${foodTypes}">
					<li>
						<a href="javascript:void(0);" th:text="${foodType.name}" th:class="${foodType.id == type_id} ? b" th:onclick="|goNewPage(${desk.id}, ${foodType.id}, 1)|"></a>
					</li>
				</ul>
			</div>
			<div id="dish_3" style="height: auto; margin-top: 150px">
				<!-- 搜索菜品表单  -->
				<form action="#" method="post">
					<table width="166px">
						<tr>
							<td>
								<!--餐桌信息-->
								<span style="color: black; font-weight: bold; font-size: 16px" th:text="'当前餐桌为: ' + '' +${desk.name}"></span>
								<a href="javascript:void(0);" th:onclick="|goNewPage(${desk.id}, 0, 1)|">
									<img src="/detail/style/images/look.gif" />
								</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>


	</div>
</body>
</html>
